﻿<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>jqxTextArea Fluid Size Example. The width of the textarea in
        this demo is in Percentages.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtextarea.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var url = "../sampledata/customers.txt";

            // prepare the data
            var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'CompanyName' },
                        { name: 'ContactName' }
                    ],
                    url: url
                };
            var dataAdapter = new $.jqx.dataAdapter(source);

            // Create a jqxInput
            $('#jqxTextArea').jqxTextArea({ source: dataAdapter, placeHolder: "Contact Name:", displayMember: "ContactName", valueMember: "CompanyName", width: '30%', height: 80 });
        });
    </script>
</head>
<body>
    <textarea id="jqxTextArea"></textarea>
    <br />
    <label style="font-family: Verdana; font-size: 10px;">
        ex: Ana</label>
</body>
</html>
